<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row class="operation">
                        <Button @click="setExport" type="primary" icon="ios-download-outline">导出</Button>
                    </Row>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号" style="width: 200px" />
                            </Form-item>
                            <Form-item label="合作商名称" prop="dealerName">
                                <Input v-model="searchForm.dealerName" type="text" placeholder="请输入合作商名称" style="width:200px"/>
                            </Form-item>
                            <Form-item label="放款审核时间"  prop="lendingPassDate">
                                <DatePicker v-model="searchForm.lendingPassDate" type="daterange" format="yyyy-MM-dd hh:mm:ss" clearable
                                            @on-change="selectDateRange" placeholder="选择起始时间"
                                            style="width: 160px"></DatePicker>
                            </Form-item>
                            <Form-item label="二次查验结果" prop="invoiceVerificationResult">
                                <Select v-model="searchForm.invoiceVerificationResult" clearable placeholder="请选择" style="width:200px">
                                    <Option value="yes">符合</Option>
                                    <Option value="no">不符合</Option>
                                </Select>
                            </Form-item>
                            <Form-item label="客户姓名" prop="custName">
                                <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入客户姓名" style="width: 200px" />
                            </Form-item>
                            <Form-item style="left: 50px">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Table v-bind:loading="loading"
                               border
                               v-bind:columns="columns"
                               v-bind:data="data"
                               sortable="custom"
                               @on-sort-change="changeSort"
                               @on-selection-change="showSelect"
                               ref="table">
                            <template slot-scope="{ row, index }" slot="tags">
                                <Tag v-for="item in row.labelList" :color="item.labelColor" >{{item.labelName}}</Tag>
                            </template>
                            <template slot-scope="{ row, index }" slot="invoiceVerificationResult" v-if="row.invoiceVerificationResult == undefined">
                                <span>{{""}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="invoiceVerificationResult" v-if="row.invoiceVerificationResult != undefined">
                                <span>{{setInvoiceResult(row.invoiceVerificationResult)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import {getInvoiceList,getAllResultList} from "@/projects/afs-core-business/api/afs-case/second-inspection-invoice/secondInspectionInvoice"
    export default {
        name: 'secondInspectionInvoice',
        mounted() {
            this.init()
        },
        data() {
            return {
                loading:false,
                searchForm:{
                    applyNo: '',
                    custName: '',
                    dealerName: '',
                    startDate:null,
                    endDate:null,
                    allResultListData:[],
                    invoiceVerificationResult:'',
                    pageSize:10,
                    pageNumber:1,
                },
                dicKeys: [
                    'businessType',
                    'conApplyStatus',
                    'carType',
                    'carNature',
                    'operateWay',
                    'affiliatedWay',
                    'lendingMode',
                    'channelType',
                    'priority'
                ],
                selectList: [],
                selectCount: 0,
                columns: [
                    {
                        title: "申请编号",
                        key: "applyNo",
                        minWidth: 160,
                        sortable: true,
                    },
                    {
                        title: "经销商名称",
                        key: "dealerName",
                        sortable: true,
                        minWidth: 120
                    },
                    {
                        title: "客户姓名",
                        key: "custNameRepeat",
                        minWidth: 140,
                        sortable: true,
                    },
                    {
                        title: "案件标记",
                        key: "tags",
                        minWidth: 280,
                        sortable: true,
                        slot:"tags"
                    },
                    {
                        title: "放款审核通过时间",
                        key: "lendingPassDate",
                        sortable: true,
                        minWidth: 160
                    },
                    {
                        title: "第二次发票检验结果",
                        key: "invoiceVerificationResult",
                        minWidth: 140,
                        sortable: true,
                        slot:"invoiceVerificationResult"
                    },
                    {
                        title: "发票检验结果详情",
                        key: "invoiceVerificationResultDesc",
                        minWidth: 140,
                        sortable: true,
                    }
                ],
                data: [],
                total: 0
            }
        },

        methods: {
            init() {
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                this.getInvoiceList()
            },
            handleSearch() {
                this.searchForm.pageNumber = 1
                this.searchForm.pageSize = 10
                console.log(this.searchForm)
                this.getInvoiceList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm ={
                    pageNumber: 1,
                    pageSize: 10
                }
                // 重新加载数据
                this.getInvoiceList();
            },
            getInvoiceList(){
                this.loading = true
                getInvoiceList(this.searchForm).then(res=>{
                    this.loading = false
                    if (res.code === '0000') {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            setExport(){
                getAllResultList(this.searchForm).then(res=>{
                    if(res.code === "0000"){
                        this.allResultListData = res.data
                        this.$refs.table.exportCsv({
                            filename: 'Case Invoice result',
                            columns: this.columns,
                            data: this.allResultListData
                        });
                    }
                })
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getInvoiceList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getInvoiceList();
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false)
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getInvoiceList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
                this.data.forEach(tableData=>{
                    tableData._checked = false;
                    console.log("333"+tableData.applyNo);
                    e.forEach( data => {
                        if(data.applyNo == tableData.applyNo){
                            tableData._checked = true;
                        }
                    })
                })
            },
            setInvoiceResult(v){
                if(v=='yes'){
                    return "符合"
                }
                if(v=='no'){
                    return "不符合"
                }
            }
        }
    }
</script>

<style scoped>
</style>
